<template>
	<view class="all body"  >
		<!--顶部内容-->
		<view class="top-content">
			<view class="search-bar" >
				
				<uni-section title="基本用法" type="line" >
							<uni-search-bar @confirm="search" 
							
							:focus="true" v-model="searchValue" 
							class="search"
							cancelButton="none"
							@blur="blur" @focus="focus" @input="input"
								@cancel="cancel" @clear="clear"
								
								>
							</uni-search-bar>
							
						</uni-section>
						
						
						
			</view>
				<uni-icons type="plus" :size="30" class="add-person-button"></uni-icons>
			

		</view>
		
		<!--上方功能区start-->
		<view class="message-top">
				<image  class="search-partner"   src="../../static/xvnzhaodazi.jpg"></image>
			<view class="msg-right-all">
				<image class="right-top" src="../../static/ling.png"></image>
				<image class="right-btm" src="../../static/teacher.png"></image>
			</view>
		</view>
		<!--上方功能区end-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: ''
			}
		},
		methods: {
					search(res) {
						
					},
					input(res) {
						console.log('----input:', res)
					},
					clear(res) {
						
					},
					blur(res) {
						
					},
					focus(e) {
						
					},
					cancel(res) {
						
					}
				},
				onBackPress() {
					// #ifdef APP-PLUS
					plus.key.hideSoftKeybord();
					// #endif
				}
	}
</script>

<style>
	.body{
		background-color:#F5F5F5 ;
		height: 100%;
		width: 100%;
	}
	.right-top:active{
		transform: rotate(10deg);
	}
	.right-top{
		margin: auto;
		box-sizing: border-box;
		width: 80%;
		height: 50%;
		scale: 0.7;
	}
	.right-btm:active{
		transform: rotate(10deg);
	}
	.right-btm{
		margin: auto;
		box-sizing: border-box;
		width: 80%;
		height: 50%;
		scale: 0.7;
	}
	.msg-right-all{
		flex: 1;
		width: 40%;
		height: 90%;
		margin: auto;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}
	.all{
		width: 100%;
	}
	.search-partner:active{
		scale: 1.007;
	}
	.search-partner{
		height: 90%;
		width: 90%;
		flex:3;
		background-color: aquamarine;
		margin: auto;
		box-sizing: border-box;
		border-radius: 8%;
	}
	.search-partner img{
		object-fit: cover;
		background-color: aqua;
		overflow: hidden;
		
	}
	.message-top{
		display: flex;
		flex-direction: row;
		width: 90%;
		margin: auto;
		box-sizing: border-box;
		height: 300rpx;
		background-color: #F5F5F5;
		border-radius: 5%;
	}
	
	
	
	.search{
		border-radius: 5%;
	}
	.uni-search-bar{
		border-radius: 10%;
	}
		.top-content{
			display: flex;
			justify-content: space-between;
			background-color: #f8f8f8;
			width: 100%;
			margin: auto;
			box-sizing: border-box;
			border: #f8f8f8 solid 2rpx;
		}
		.search-bar{
			margin-top: -22rpx;
			width: 90%;

		}
		.add-person-button{
			margin-top: 8rpx;
			float: right;
		}
	

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color:#666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		margin-top: 10px;
	}
		
	

</style>
